<template xmlns:border-radius="http://www.w3.org/1999/xhtml">
  <!--  登录界面 -->
  <div class="login" :style="{'background-image':'url('+params.loginPageBackground+')'}">
    <el-button class="login-image" @click="Home">
      <img :src=params.loginPageAvatar alt="headPortrait">
    </el-button>
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
      <h3 class="title">萨科系统</h3>
      <el-form-item prop="username">
        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          auto-complete="off"
          placeholder="密码"
          @keyup.enter.native="handleLogin"
        >
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
        </el-input>
      </el-form-item>
      <el-dialog title="注册账号" class="title" :visible.sync="dialogFormVisible">
        <el-form ref="registerForm" :model="registerForm" :rules="rules">
          <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickName">
            <el-input style="width: 80%" v-model="registerForm.nickName" autocomplete="off"
                      placeholder="输入你的用户名称"></el-input>
          </el-form-item>
          <el-form-item label="账号" :label-width="formLabelWidth" prop="userName">
            <el-input style="width: 80%" v-model="registerForm.userName" autocomplete="off"
                      placeholder="输入你的账号"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
            <el-input style="width: 80%" v-model="registerForm.password" autocomplete="off"
                      placeholder="输入你的密码"></el-input>
          </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth" prop="phonenumber">
            <el-input style="width: 80%" v-model="registerForm.phonenumber" autocomplete="off"
                      placeholder="输入你的手机号码"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
            <el-input style="width: 80%" v-model="registerForm.email" autocomplete="off"
                      placeholder="输入你的邮箱"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click=RegisterAnAccount>注 册</el-button>
        </div>
      </el-dialog>
      <el-form-item prop="code">
        <el-input
          v-model="loginForm.code"
          auto-complete="off"
          placeholder="验证码"
          style="width: 63%"
          @keyup.enter.native="handleLogin"
        >
          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
        </el-input>
        <div class="login-code">
          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
        </div>
      </el-form-item>
      <div>
        <el-row :gutter="15">
          <el-col :span="15">
            <el-form-item label="记住密码">
              <el-switch v-model="loginForm.rememberMe"></el-switch>
            </el-form-item>

          </el-col>
          <el-col :span="7">
            <el-button @click="dialogFormVisible=true"> 注册账号</el-button>
          </el-col>
        </el-row>
      </div>
      <el-form-item style="width:100%;">
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width:100%;"
          @click.native.prevent="handleLogin"
        >
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
      </el-form-item>
    </el-form>
    <!--底部-->
    <div class="el-login-footer">
      <span> 太上开天执符御历 含真体道金阙 云宫九穹御历 万道无为大道明殿昊天金阙 至尊玉皇 赦罪大天尊率穹高上帝 </span>
    </div>
  </div>
</template>

<!--suppress JSUnresolvedVariable -->
<script>
import {getCodeImg, RegisterAnAccount} from '@/api/login'
import Cookies from 'js-cookie'
import {encrypt, decrypt} from '@/utils/jsencrypt'
import {loadBackgroundImage} from "@/api/home";

export default {
  name: 'Login',
  data() {
    //手机号验证
    const validatorPhone = function (rule, value, callback) {
      if (value === '') {
        callback(new Error('手机号不能为空'))
      } else if (!/^1\d{10}$/.test(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }
    // 邮箱验证
    const checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (!value) {
        return callback(new Error('邮箱不能为空'))
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的邮箱格式'))
        }
      }, 100)
    }

    return {
      dialogFormVisible: false,
      formLabelWidth: '100px',
      //注册表单
      registerForm: {
        nickName: null,
        userName: null,
        password: null,
        phonenumber: null,
        email: null
      },
      //注册校验
      rules: {
        nickName: [
          {required: true, message: '请输入用户昵称', trigger: 'blur'},
          {min: 1, max: 9, message: '长度在 1 到 9 个字符', trigger: 'blur'}
        ],
        userName: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {min: 6, max: 11, message: '长度在 6 到 11 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 11, message: '长度在 6 到 11 个字符', trigger: 'blur'}
        ],
        phonenumber: [
          {required: true, validator: validatorPhone, message: '请输入正确的手机号', trigger: 'blur'}
        ],
        email: [
          {required: true, validator: checkEmail, message: '请输入正确的邮箱', trigger: 'blur'}
        ]
      },
      codeUrl: '',
      cookiePassword: '',
      loginForm: {
        username: '',
        password: '',
        rememberMe: false,
        code: '',
        uuid: ''
      },
      loginRules: {
        username: [
          {required: true, trigger: 'blur', message: '用户名不能为空'}
        ],
        password: [
          {required: true, trigger: 'blur', message: '密码不能为空'}
        ],
        code: [{required: true, trigger: 'change', message: '验证码不能为空'}]
      },
      loading: false,
      redirect: undefined,
      params: {
        loginPageBackground: '',
        loginPageAvatar: '',
      }
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    },
    loginPageBackground() {
      this.$el.style.setProperty('colorStyle', this.params.loginPageBackground)
    }
  },
  created() {
    this.getCode()
    this.getCookie()
    this.params.loginPageBackground = this.$route.params.loginPageBackground;
    this.params.loginPageAvatar = this.$route.params.loginPageAvatar;
    if (this.params.loginPageBackground === undefined) {
      loadBackgroundImage().then(res => {
        this.params.loginPageAvatar = res.data.loginPageAvatar
        this.params.loginPageBackground = res.data.loginPageBackground
      })
    }
  },
  mounted() {
    this.$el.style.setProperty('colorStyle', this.params.loginPageBackground);
  },

  methods: {
    loginPageBackground() {
      return this.params.loginPageBackground
    },
    //回到主页
    Home() {
      this.$router.go(-1)
    },
    //注册账号
    RegisterAnAccount() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          RegisterAnAccount(this.registerForm).then(res => {
            if (res.code === 200) {
              this.msgSuccess(res.data)
              this.loginForm.username = this.registerForm.userName
              this.loginForm.password = this.registerForm.password
              this.dialogFormVisible = false
            } else {
              this.msgError(res.msg)
            }
          })
        } else {
          this.msgError('请填写正确注册信息')
        }
      })
    },
    //获取验证码代码生成图片
    getCode() {
      getCodeImg().then(res => {
        this.codeUrl = 'data:image/gif;base64,' + res.img
        this.loginForm.uuid = res.uuid
      })
    },

    getCookie() {
      const username = Cookies.get('username')
      const password = Cookies.get('password')
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      }
    },

    //登录请求
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          if (this.loginForm.rememberMe) {
            Cookies.set('username', this.loginForm.username, {expires: 30})
            Cookies.set('password', encrypt(this.loginForm.password), {expires: 30})
            Cookies.set('rememberMe', this.loginForm.rememberMe, {expires: 30})
          } else {
            Cookies.remove('username')
            Cookies.remove('password')
            Cookies.remove('rememberMe')
          }
          this.$store.dispatch('Login', this.loginForm).then(() => {
            this.$router.push({path: this.redirect || '/redirect'}).catch(() => {
            })
          }).catch(() => {
            this.loading = false
            this.getCode()
          })
        }
      })
    },
  }
}

</script>

<style rel="stylesheet/scss" lang="scss">
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-size: cover;
  background-image: var(colorStyle);
}

.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-image {
  height: 130px;
  width: 130px;
  //与边框的间距
  padding: 10px;
  //边界线 颜色
  border: 0px solid #00afff;
  //圆角边界线
  border-radius: 50%;
  //边影
  box-shadow: 0 0 10px #000000;
  //位置 absolute 绝对位置
  position: absolute;
  //距离左边
  left: 50%;
  //坐标位置
  transform: translate(-50%, -150%);
  //背景
  background-color: #00afff;

  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #acded3;

  }
}

.logon-formData {
  //边影
  box-shadow: 0 0 10px #fafafa;
  //宽度
  width: 450px;
  //高度
  height: 450px;
  //背景颜色
  background-color: #00afff;
  //圆角
  border-radius: 35px;
  //位置 absolute 绝对位置
  position: absolute;
  //距离左边
  left: 50%;
  //距离右边
  top: 50%;
  //坐标位置
  transform: translate(-50%, -50%);
}

.login-form {
  border-radius: 6px;
  background: #bbc5e5;
  //background-image: url("../assets/images/Avatar.png");

  //background-size: cover ;
  width: 400px;
  padding: 25px 25px 5px 25px;

  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
}

.login-code-img {
  height: 38px;
}


</style>
